<template>
  <div class="call">
    <el-select v-model="currentYear" placeholder="请选择" @change="change">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-select v-model="currentMonth" placeholder="请选择" @change="change">
      <el-option
        v-for="item in 12"
        :key="item.value"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-calendar v-model="value">
      <template #dateCell="{ date }">
        <span class="istoday">{{ isDay(date) }}</span>
        <span v-if="isRest(date)" class="rest">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      value: new Date(), // new Date('2021-12')
      value2: '',
      options: [],
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1
    }
  },
  computed: {},
  created() {
    Array.from(Array(11), (item, i) => {
      this.options.push(this.currentYear + i - 5)
    })
  },
  methods: {
    isDay(d) {
      return d.getDate()
    },
    isRest(date) {
      // if (date.getDay() === 0 || date.getDay() === 6) {
      //   return true
      // } else {
      //   return false
      // }
      return !!(date.getDay() === 0 || date.getDay() === 6)
    },
    change() {
      this.value = new Date(`${this.currentYear}-${this.currentMonth}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.rest {
  background-color: #fa7c4d;
  border-radius: 50%;
  padding: 2px;
  color: #fff;
  font-size: 14px;
  margin-left: 10px;
}
.call {
  ::v-deep .el-calendar__header {
    display: none;
  }
  ::v-deep .is-selected span:nth-child(1) {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: blue;
    border-radius: 50%;
    padding: 2px;
    color: #fff;
    font-size: 14px;
  }
}
</style>
